<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="/static/client/layui/css/layui.css">
<style type="text/css">
body, html, #allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}

.search {
	position: absolute;
	z-index: 1;
	width: 500px;
	height: 38px;
	top: 30px;
	display: none;
	left: 50px;
}

.results {
	position: absolute;
	z-index: 9999;
	width: 300px;
	top: 50px !important;
	right: 10px;
	background-color: gray;
}
</style>
<script type="text/javascript"
	src="//api.map.baidu.com/api?v=2.0&ak=AO9m7izuKAw2X27aD9wsGCGi19WSHGC1"></script>

<title>浏览器定位</title>
</head>
<body>
	<div id="allmap"></div>

	<div class="search">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<div style="float: left;  width: 300px; background-color: green;">
					<input type="text" name="keyword" required lay-verify="required"
						id="suggestId" placeholder="请输入关键词" autocomplete="off"
						class="layui-input">
				</div>
				<div style="float: left;">
					<button class="layui-btn  layui-btn-normal" lay-submit
						lay-filter="map">搜索</button>
				</div>
			</div>
			<div id="searchResultPanel"
				style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
		</form>
	</div>
	<div class="results" id="results"></div>
</body>
</html>
<script src="/static/client/layui/layui.js"></script>
<script type="text/javascript">
// 百度地图API功能
var  address="";
	layui.use([ 'layer', 'form', 'jquery' ], function() {
		var layer = layui.layer,
			form = layui.form;
		var $ = layui.jquery;


		var loading = layer.msg("正在定位中...", {
			icon : 16,
			time : 0,
			shade : [ 0.2, 'black' ]
		});

		var map = new BMap.Map("allmap");
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r) {
			if (this.getStatus() == BMAP_STATUS_SUCCESS) {
				var mk = new BMap.Marker(r.point);
				map.addOverlay(mk);
				map.centerAndZoom(r.point, 12);
				layer.close(loading)
				$(".search").fadeIn(600);
			} else {
				map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
				layer.msg('定位失败:' + this.getStatus())
				layer.close(loading)
				$(".search").fadeIn(600);
			}

			var local = new BMap.LocalSearch(map,
				{
					renderOptions : {
						map : map,
						panel : "results",
						selectFirstResult : true,
						autoViewport : true
					}
				});

				var  markerArr=[];
			local.setMarkersSetCallback(function(pois) {
				for (var i = 0; i < pois.length; i++) {
					
					markerArr[i] = pois[i].marker;
					pois[i].marker.addEventListener("infowindowopen", function(e) {
							//$("#suggestId").val( )
							address=$(e.target.Cb.content.toString()).find("td:eq(1)").text();
							window.parent.$("#selectAddress").html("地址"+address);
					})
				}
			})
			
		


			form.on('submit(map)', function(data) {
				let keyword = data.field.keyword;
				local.search(keyword);
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});


			var ac = new BMap.Autocomplete( //建立一个自动完成的对象
				{
					"input" : "suggestId",
					"location" : map
				});


			ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
				var str = "";
				var _value = e.fromitem.value;
				var value = "";
				if (e.fromitem.index > -1) {
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

				value = "";
				if (e.toitem.index > -1) {
					_value = e.toitem.value;
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
				$("#searchResultPanel")[0].innerHTML = str;
			});

			var myValue;
			ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
				var _value = e.item.value;
				myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
				$("#searchResultPanel")[0].innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

				setPlace();
			});

			function setPlace() {
				map.clearOverlays(); //清除地图上所有覆盖物
				local.search(myValue);
			}

		}, {
			enableHighAccuracy : true
		})




	});
</script>

